package com.ecomemerce.app.comment.widgets

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.ecomemerce.app.R

@Composable
@Stable
fun SearchBar() {
    var text by remember { mutableStateOf("") }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(8.dp),
        horizontalArrangement = Arrangement.SpaceBetween, // 左右对齐
        verticalAlignment = Alignment.CenterVertically // 垂直居中
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically // 保持图片和文字对齐
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = "Banner",
                modifier = Modifier.height(32.dp)
            )
            Text("dibai", modifier = Modifier.padding(start = 4.dp)) // 图片右侧加点间距
        }

        BasicTextField(

            value = text,
            onValueChange = { text = it },
            modifier = Modifier.padding(16.dp).weight(1f)
                .background(Color.LightGray, shape = RoundedCornerShape(20.dp))
            ,
            decorationBox = { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(horizontal = 16.dp)
                ) {
                    Icon(Icons.Filled.Search, contentDescription = "Search")
                    if (text.isEmpty()) {
                        Text("搜索商品", color = Color.Gray)
                    }
                    innerTextField()
                }
            })
    }

}
